iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
0
Modern Web

網頁技術學習心得系列 第 9

JavaScript 筆記一(DOM、JavaScript 如何與前端互動、改變介面)

  • 分享至 

  • xImage
  •  

寫程式需要的三件事情:

  1. 介面:如何改變介面
  2. 監聽:如何監視事件並作出反應
  3. 資料:如何與伺服器交換資料

DOM Document Object Model

讓 JavaScript 與 HTML 之間透過 DOM 這一個橋樑溝通,將 Document 當成一個物件來看,這個物件有很多的節點 (Node),例如:

![](https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/DOM-model.svg/1200px-DOM-model.svg.png =500x450)


與瀏覽器溝通的方法

1. getElementsByTagName

用標籤名稱選擇元素。
例如:有一個 div:

<div>
  Hello World
</div>
let element = document.getElementsByTagName('div')
console.log(element);

就會印出一個 div 陣列:

印出陣列第 0 位:

2. getElementByClassName

用 Class Name 選擇元素。

HTML:

<div class='block'>
        Hello World~
    </div>

JavaScript:

 let element = document.getElementsByClassName('block')
            console.log(element);

Log 之後:

3. getElementById

用 Id Name 選擇元素。

4. querySelector

可以用 Class Name、標籤、Id Name 選擇元素,若同時有多個標籤,
只能選到第一個碰到的標籤。

5. querySelectorAll

可以用 Class Name、標籤、Id Name 選擇元素,若同時有多個標籤,
可以選到多個標籤。



上一篇
在不同 runtime 上執行的 JavaScript
下一篇
JavaScript 筆記二(改變 CSS)
系列文
網頁技術學習心得30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言